<template>
  <div>
    <h2>{{ name }}--{{ age }}</h2>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
import { reactive, toRefs, toRef } from "vue";
export default {
  setup() {
    const info = reactive({ name: "pengfan", age: 21 });
    // 1.toRefs：将reactive中的所有属性都转换成ref，建立连接
    // let {name,age} = toRefs(info);

    // 2.toReef: 对其中一个属性进行转换ref，建立连接
    let { name } = info;
    let age = toRef(info, "age");
    const changeAge = () => {
      age.value++;
    };
    return {
      name,
      age,
      changeAge,
    };
  },
};
</script>

<style scoped>
</style>